<template>
  <div class="main">
    <a-form
      id="formLogin"
      class="user-layout-login"
      ref="formLogin"
      :form="form"
      @submit="handleSubmit"
    >
      <a-form-item>
        <a-input
          size="large"
          type="text"
          placeholder="账户"
          v-decorator="[
            'account',
            {
              rules: [{ required: true, message: '请输入帐户名' }],
              validateTrigger: 'change'
            }
          ]"
        >
          <a-icon
            slot="prefix"
            type="user"
            :style="{ color: 'rgba(0,0,0,.25)' }"
          />
        </a-input>
      </a-form-item>

      <a-form-item style="margin-top: 20px;">
        <a-input
          size="large"
          type="password"
          autocomplete="false"
          placeholder="密码"
          v-decorator="[
            'pwd',
            {
              rules: [{ required: true, message: '请输入密码' }],
              validateTrigger: 'blur'
            }
          ]"
        >
          <a-icon
            slot="prefix"
            type="lock"
            :style="{ color: 'rgba(0,0,0,.25)' }"
          />
        </a-input>
      </a-form-item>

      <a-form-item style="margin-top:30px">
        <a-button
          size="large"
          type="primary"
          htmlType="submit"
          class="login-button"
        >
          确定
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { setToken } from "@/utils/auth";

export default {
  data() {
    return {
      form: this.$form.createForm(this)
    };
  },
  methods: {
    _timeFix() {
      const time = new Date();
      const hour = time.getHours();
      return hour < 9
        ? "早上好"
        : hour <= 11
        ? "上午好"
        : hour <= 13
        ? "中午好"
        : hour < 20
        ? "下午好"
        : "晚上好";
    },
    handleSubmit(e) {
      e.preventDefault();

      this.form.validateFields(["account", "pwd"], async err => {
        if (err) {
          return;
        }

        setToken("token");

        this.$router.push({ path: "/" });

        this.$notification.success({
          message: "欢迎",
          description: `${this._timeFix()}，欢迎回来`
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.user-layout-login {
  button.login-button {
    font-size: 16px;
    height: 44px;
    width: 100%;
  }
}
</style>
